<template>
<el-container>
  <el-header style="text-align:left">
       <div>
            <el-link :underline="false" style="font-size:15px" >{{this.forumDiscuss.discussTitle}}</el-link><br>
             <span style="font-size:12px">{{this.forumDiscuss.discussContent}}</span> <br>
             <span style="font-size:8px;color:rgb(179, 171, 171)">
               <span style="color: rgb(54, 255, 4)">{{this.forumDiscuss.nickname}}</span> 
               <el-divider direction="vertical"></el-divider>
                
                {{this.forumDiscuss.createTime}}
                 <el-divider direction="vertical"></el-divider>
                </span>
                <span style="font-size:8px">共{{this.forumDiscuss.answer}}个回复</span>
              <el-divider content-position="left" ></el-divider>
              
              <el-input type="textarea"
                :autosize="{ minRows: 2, maxRows: 7}"
                placeholder="请输入内容"
                v-model="forumMsg.content"
                maxlength="255"
                show-word-limit
                style="width:550px"></el-input>
              <el-button type="primary" class="el-icon-edit" style="float:right" @click="answerDiscuss">回复</el-button>  
        </div> <br>
         
  </el-header>
 
  <el-main>
      <span>评论</span>
      <el-divider content-position="left" ></el-divider>
       <el-col style="text-align:left">
        <div v-for="(discuss,index) in tableData.records" :key="discuss.id" :offset="index > 0 ? 0 : 0" >
                <el-link :underline="false" style="font-size:12px">{{discuss.content}}</el-link><br>
                <span style="font-size:8px;color:rgb(179, 171, 171)">
                    <span style="color: rgb(54, 255, 4)">{{discuss.nickname}}</span> 
                    <el-divider direction="vertical"></el-divider>
                      <span style="background-color:rgb(79, 177, 233);color:rgb(255, 255, 255)">    {{discuss.role}}  </span> 
                    <el-divider direction="vertical"></el-divider>
                    {{discuss.createTime}}
                     <el-button class="el-icon-thumb" style="float:right" @click="praiseNum(discuss)">{{discuss.praise}}</el-button>
                </span>
                <el-divider content-position="left"></el-divider>  
        </div>
        <div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-size="page.pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total">
        </el-pagination> 
        </div>
        </el-col>
  </el-main>
  </el-container>

</template>

<script>

import {setCookie} from '@/libs/cookie'
import {getCookie} from '@/libs/cookie'
import {add,page,prainseadd} from "@/api/modules/forumMsg";

export default {
    name:'',
    data(){
        return{
           forumDiscuss:{},
           forumMsg:{
             nickname:'',
             forumId:'',
             content:'',
             createTime:'',
             praise: 0,
             etc: null,
             role:''
           },
            message:{
               msg:'回复成功',
               msg2:'发送失败，回复内容不能为空'
           },
            page: {
                pageSize: 8,
                pageNum: 1,
                forumId:''
            },
            loading: false,
            total:0,
            current: 1,
            tableData:[],
            clickpraise:{}
          
        }
        
    },
    mounted(){
        let forumDiscuss = JSON.parse(getCookie("forumDiscuss") || '{}');
        this.forumDiscuss = forumDiscuss
        this.forumMsg.forumId = forumDiscuss.id
        this.page.forumId = forumDiscuss.id
        this.forumMsg.etc = forumDiscuss.answer
        let user = JSON.parse(getCookie("user") || '{}');
        this.forumMsg.nickname = user.nickname
        this.forumMsg.role = user.role
        console.log("111")
        console.log(this.forumMsg)
        this.loadTableData()
    },
    methods:{
        //点赞
      praiseNum(filter,discuss){
        this.clickpraise = discuss
        //console.log(discuss)
        filter = {
          ...filter,
          ...this.clickpraise
        }
        prainseadd(filter).then(res =>{
            this.loadTableData()
          })
      },
        answerDiscuss(filter){
            filter = {
                ...filter,
                ...this.forumMsg
            }
            if(this.forumMsg.content == '')
            {
                 this.toast(this.message.msg2,10)
            }
            else{
                add(filter).then(res =>{
                this.forumDiscuss.answer = this.forumDiscuss.answer+1
                console.log(this.forumDiscuss.answer)
                  setCookie("forumDiscuss", JSON.stringify(this.forumDiscuss), {
                               expires: 7
                           })
                 let forumDiscuss = JSON.parse(getCookie("forumDiscuss") || '{}');
                    this.forumDiscuss = forumDiscuss
                    this.forumMsg.forumId = forumDiscuss.id
                    this.forumMsg.etc = forumDiscuss.answer
                    this.toast(this.message.msg)
                    this.loadTableData()
                })
            }
        },

        //分页相关事件处理
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.loadTableData()
        },
        handleCurrentChange(val) {
            this.page.pageNum = val;
            this.current = val
            this.loadTableData()
        },
        loadTableData(filter,callback){
            filter = {
                ...filter,
                ...this.page,
            }
            page(filter).then(res => {
                this.total = res.data.total
                this.tableData = {
                ...res.data,
                data: res.data.records
                }
                
                console.log(this.tableData)
            })
        },
    }
}
</script>   

<style  scoped>
  .el-header {
    background-color: rgb(248, 248, 248);
    color: rgb(114, 111, 111);
    width: 700px;
  }
   .el-main {
    background-color: rgb(255, 255, 255);
    text-align: left;
    margin-top:230px;
    width: 800px;
  }
</style>